<template>
  <div>
    <!-- 查询表单 -->
    <el-form :model="param" ref="form" label-width="80px" class="order-search-form">
      <el-row>
        <el-col :span="6">
          <el-input v-model="param.orderId" placeholder="请输入订单id" clearable size="small"></el-input>
        </el-col>

        <el-col :span="6">
          <el-input v-model="param.afterSalesOrderId" placeholder="请输入售后单id" clearable size="small"></el-input>
        </el-col>

        <el-col :span="6" :offset="1">
          <el-select v-model="param.status" placeholder="请选择物流状态" style="width: 100%" size="small">
            <el-option v-for="(label, value) in STATUS_OPTIONS" :key="value" :label="label" :value="value"></el-option>
          </el-select>
        </el-col>

        <el-col :span="6">
          <el-button type="danger" @click="clearInfo">清空</el-button>
          <el-button type="primary" @click="queryPageInfo">筛选</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!-- 订单表格 -->
    <el-tabs v-model="activeName" @tab-click="handleTabClick" class="order-table-tabs">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane label="订单发货物流" name="order"></el-tab-pane>
      <el-tab-pane label="售后物流" name="aftercare"></el-tab-pane>
    </el-tabs>

    <el-table :data="filteredTableData" style="width: 100%" class="order-table" ref="orderTable">
      <el-table-column prop="id" label="物流信息ID"></el-table-column>
      <el-table-column prop="orderId" label="关联订单ID"></el-table-column>
      <el-table-column prop="afterSalesOrderId" label="关联售后单ID"></el-table-column>
      <el-table-column prop="carrierName" label="物流公司名称"></el-table-column>
      <el-table-column prop="trackingNumber" label="物流单号"></el-table-column>
      <el-table-column prop="status" label="物流状态">
        <template slot-scope="scope">
              {{ transStatus(scope.row.status) }}
            </template>
      </el-table-column>
      <el-table-column prop="delyBussCode" label="物流类型">
        <template slot-scope="scope">
          {{ transCode(scope.row.delyBussCode) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑物流信息" :visible.sync="editDialogVisible" width="30%">
      <el-form :model="currentRow" ref="editForm" label-width="100px">
        <el-form-item label="物流公司名称">
          <el-input v-model="currentRow.carrierName"></el-input>
        </el-form-item>
        <el-form-item label="物流单号">
          <el-input v-model="currentRow.trackingNumber"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      STATUS_OPTIONS: {
        '-1': '全部',
        '0': '未开始流程',
        '1': '已揽货',
        '2': '已发货',
        '3': '已签收'
      },
      param: {
        orderId: '',    
        afterSalesOrderId: '',
        status: ''
      },
      tableData: [],
      activeName: 'all',
      editDialogVisible: false,
      currentRow: {}
    };
  },
  computed: {
    filteredTableData() {
      if (this.activeName === 'all') {
        return this.tableData;
      } else {
        return this.tableData.filter(item => {
          switch (this.activeName) {
            case 'order':
              return item.delyBussCode === 0;
            case 'aftercare':
              return item.delyBussCode === 1;
            default:
              return true;
          }
        });
      }
    }
  },
  methods: {   
    clearInfo() {
      this.param = {
        orderId: '',    
        afterSalesOrderId: '',
        delyBussCode: ''
      };
      this.queryPageInfo();
    },
    transStatus(status) {
      const statusList = {
        0: '未开始流程',
        1: '已揽货',
        2: '已发货',
        3: '已签收'
      };
      return statusList[status];
    },
    transCode(delyBussCode) {
      const codesList = {
        0: '订单发货物流',
        1: '售后物流',
      };
      return codesList[delyBussCode];
    },
    queryPageInfo() {
      this.$axios.post('/apio/afterSaleLogistics/getLogistics', this.param)
        .then(resp => {
          console.log(resp.data);
          if (resp.data.code === 200) {
            this.tableData = resp.data.data;
          }
        })
        .catch(error => {
          console.error('Error fetching logistics data:', error);
        });
    },
    handleTabClick(tab) {
      // 处理标签点击事件
      this.queryPageInfo();
    },
    handleEdit(index, row) {
      this.currentRow = { ...row }; // 深拷贝当前行数据
      this.editDialogVisible = true;
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRow(row.id);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    deleteRow(id) {
      this.$axios.get('/apio/afterSaleLogistics/delete/'+id)
        .then(resp => {
          if (resp.data.code === 200) {
            this.$message.success('删除成功');
            this.queryPageInfo();
          }
        })
        .catch(error => {
          console.error('Error deleting logistics data:', error);
        });
    },
    saveEdit() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$axios.post('/apio/afterSaleLogistics/update', this.currentRow)
            .then(resp => {
              if (resp.data.code === 200) {
                this.$message.success('更新成功');
                this.editDialogVisible = false;
                this.queryPageInfo();
              }
            })
            .catch(error => {
              console.error('Error updating logistics data:', error);
            });
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    }
  },
  created() {
    this.queryPageInfo();
  }
};
</script>

<style scoped>
.order-search-form {
  margin-bottom: 20px;
}
.order-table-tabs {
  margin-bottom: 20px;
}
</style>